import React, { Component } from 'react'
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
  Button,
} from 'react-native'

export default class index extends Component {
  render() {
    return (
      <View style={[styles.container]}>
        <ScrollView>
          {/* 主轴方向 */}
          <Text style={{ fontSize: 50 }}>主轴方向</Text>

          <View>
            <Text style={[styles.h3]}>flexDirection: 'column'(默认)</Text>
            <View style={[styles.box, styles.flexColumn]}>
              <Text style={[styles.item]}>云缨</Text>
              <Text style={[styles.item]}>亚瑟</Text>
              <Text style={[styles.item]}>后裔</Text>
            </View>
          </View>

          <View>
            <Text style={[styles.h3]}>flexDirection: 'column-reverse'</Text>
            <View style={[styles.box, styles.flexColumnReverse]}>
              <Text style={[styles.item]}>云缨</Text>
              <Text style={[styles.item]}>亚瑟</Text>
              <Text style={[styles.item]}>后裔</Text>
            </View>
          </View>

          <View>
            <Text style={[styles.h3]}>flexDirection: 'row'</Text>
            <View style={[styles.box, styles.flexRow]}>
              <Text style={[styles.item]}>云缨</Text>
              <Text style={[styles.item]}>亚瑟</Text>
              <Text style={[styles.item]}>后裔</Text>
            </View>
          </View>

          <View>
            <Text style={[styles.h3]}>flexDirection: 'row-reverse'</Text>
            <View style={[styles.box, styles.flexRowReverse]}>
              <Text style={[styles.item]}>云缨</Text>
              <Text style={[styles.item]}>亚瑟</Text>
              <Text style={[styles.item]}>后裔</Text>
            </View>
          </View>

          {/* 主轴对齐方式 */}
          <Text style={{ fontSize: 50 }}>主轴对齐方式</Text>

          <View>
            <Text style={[styles.h3]}>justifyContent: 'flex-start'</Text>
            <View style={[styles.box, styles.flexRow, styles.justifyContentStart]}>
              <Text style={[styles.item, { height: 28 }]}>云缨</Text>
              <Text style={[styles.item, { height: 28 }]}>亚瑟</Text>
              <Text style={[styles.item, { height: 28 }]}>后裔</Text>
            </View>
          </View>

          <View>
            <Text style={[styles.h3]}>justifyContent: 'center'</Text>
            <View style={[styles.box, styles.flexRow, styles.justifyContentCenter]}>
              <Text style={[styles.item, { height: 28 }]}>云缨</Text>
              <Text style={[styles.item, { height: 28 }]}>亚瑟</Text>
              <Text style={[styles.item, { height: 28 }]}>后裔</Text>
            </View>
          </View>

          <View>
            <Text style={[styles.h3]}>justifyContent: 'flex-end'</Text>
            <View style={[styles.box, styles.flexRow, styles.justifyContentEnd]}>
              <Text style={[styles.item, { height: 28 }]}>云缨</Text>
              <Text style={[styles.item, { height: 28 }]}>亚瑟</Text>
              <Text style={[styles.item, { height: 28 }]}>后裔</Text>
            </View>
          </View>

          <View>
            <Text style={[styles.h3]}>justifyContent: 'space-around'</Text>
            <View style={[styles.box, styles.flexRow, styles.justifyContentAround]}>
              <Text style={[styles.item, { height: 28 }]}>云缨</Text>
              <Text style={[styles.item, { height: 28 }]}>亚瑟</Text>
              <Text style={[styles.item, { height: 28 }]}>后裔</Text>
            </View>
          </View>

          <View>
            <Text style={[styles.h3]}>justifyContent: 'space-evenly'</Text>
            <View style={[styles.box, styles.flexRow, styles.justifyContentEvenly]}>
              <Text style={[styles.item, { height: 28 }]}>云缨</Text>
              <Text style={[styles.item, { height: 28 }]}>亚瑟</Text>
              <Text style={[styles.item, { height: 28 }]}>后裔</Text>
            </View>
          </View>

          <View>
            <Text style={[styles.h3]}>justifyContent: 'space-between'</Text>
            <View style={[styles.box, styles.flexRow, styles.justifyContentBetween]}>
              <Text style={[styles.item, { height: 28 }]}>云缨</Text>
              <Text style={[styles.item, { height: 28 }]}>亚瑟</Text>
              <Text style={[styles.item, { height: 28 }]}>后裔</Text>
            </View>
          </View>

          {/* 交叉轴对齐方式 */}
          <Text style={{ fontSize: 50 }}>交叉轴对齐方式</Text>

          <View>
            <Text style={[styles.h3]}>alignItems: 'flex-start'</Text>
            <View style={[styles.box, styles.flexRow, styles.alignItemsStart]}>
              <Text style={[styles.item, { height: 28 }]}>云缨</Text>
              <Text style={[styles.item, { height: 28 }]}>亚瑟</Text>
              <Text style={[styles.item, { height: 28 }]}>后裔</Text>
            </View>
          </View>

          <View>
            <Text style={[styles.h3]}>alignItems: 'center'</Text>
            <View style={[styles.box, styles.flexRow, styles.alignItemsCenter]}>
              <Text style={[styles.item, { height: 28 }]}>云缨</Text>
              <Text style={[styles.item, { height: 28 }]}>亚瑟</Text>
              <Text style={[styles.item, { height: 28 }]}>后裔</Text>
            </View>
          </View>

          <View>
            <Text style={[styles.h3]}>alignItems: 'flex-end'</Text>
            <View style={[styles.box, styles.flexRow, styles.alignItemsEnd]}>
              <Text style={[styles.item, { height: 28 }]}>云缨</Text>
              <Text style={[styles.item, { height: 28 }]}>亚瑟</Text>
              <Text style={[styles.item, { height: 28 }]}>后裔</Text>
            </View>
          </View>

          <View>
            <Text style={[styles.h3]}>alignItems: 'stretch'</Text>
            <View style={[styles.box, styles.flexRow, styles.alignItemsStretch]}>
              <Text style={[styles.item]}>云缨</Text>
              <Text style={[styles.item, { height: 28 }]}>亚瑟</Text>
              <Text style={[styles.item, { height: 28 }]}>后裔</Text>
            </View>
          </View>

          <View>
            <Text style={[styles.h3]}>alignItems: 'baseline'</Text>
            <View style={[styles.box, styles.flexRow, styles.alignItemsBaseline]}>
              <Text style={[styles.item, { fontSize: 40 }]}>云缨</Text>
              <Text style={[styles.item, { fontSize: 20 }]}>亚瑟</Text>
              <Text style={[styles.item, { height: 28 }]}>后裔</Text>
            </View>
          </View>

          {/* 尺寸比例 */}
          <Text style={{ fontSize: 50 }}>尺寸比例</Text>

          <View>
            <Text style={[styles.h3]}>flex: 'column'(默认)</Text>
            <View style={[styles.box, styles.flexRow]}>
              <Text style={[styles.item, { flex: 2 }, { backgroundColor: '#ae5' }]}>云缨</Text>
              <Text style={[styles.item, { flex: 1 }, { backgroundColor: '#48a' }]}>亚瑟</Text>
              <Text style={[styles.item]}>后裔</Text>
            </View>
          </View>
        </ScrollView>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  h3: {
    fontSize: 25,
    fontWeight: 'bold',
    marginHorizontal: 8,
    color: '#5e7ce0'
  },
  box: {
    height: 150,
    margin: 10,
    padding: 5,
    backgroundColor: '#ffa',
  },
  item: {
    padding: 4,
    backgroundColor: '#dfb',
    textAlign: 'center',
  },

  flexColumn: {
    flexDirection: 'column'
  },
  flexColumnReverse: {
    flexDirection: 'column-reverse'
  },
  flexRow: {
    flexDirection: 'row'
  },
  flexRowReverse: {
    flexDirection: 'row-reverse'
  },

  justifyContentStart: {
    justifyContent: 'flex-start'
  },
  justifyContentCenter: {
    justifyContent: 'center'
  },
  justifyContentEnd: {
    justifyContent: 'flex-end'
  },
  justifyContentAround: {
    justifyContent: 'space-around'
  },
  justifyContentEvenly: {
    justifyContent: 'space-evenly'
  },
  justifyContentBetween: {
    justifyContent: 'space-between'
  },

  alignItemsStart: {
    alignItems: 'flex-start'
  },
  alignItemsCenter: {
    alignItems: 'center'
  },
  alignItemsEnd: {
    alignItems: 'flex-end'
  },
  alignItemsStretch: {
    alignItems: 'stretch'
  },
  alignItemsBaseline: {
    alignItems: 'baseline'
  },
})
